<template>
  <div id="display">
   <div id="pointdisplay" ref="pointdisplay" :style="pointdisplayStyle">
      <div ref="p1" class="pointer pointer1" :style="p1Style"></div>
      <div ref="p2" class="pointer pointer2" :style="p2Style"></div>
      <div ref="p3" class="pointer pointer3" :style="p3Style"></div>
      <div ref="p4" class="pointer pointer4" :style="p4Style"></div>
      <div class="cover"></div>
      <p>{{oldpoint}}</p>
    </div>
  </div>
  <form action="#" id="setNum" ref="setNum">
    <input type="number" id="numInput" ref="numInput" v-model="mynum"/>
    <button type="submit" id="submitNum" ref="submitNum" @click="mysubmit">Set points</button>
  </form>
  <div class="instructions">max. 200, min. 0.</div>
  <footer>— A Pen by Moriarty —</footer>
  
  <!-- <div ref="srx" :style="srxStyleObject">srx</div> -->
</template>

<script setup>
import { onMounted, reactive } from "vue"
const props = defineProps(['foo'])



var mynum = ref(props.foo);
console.log(mynum.value);
var oldpoint =  ref(42);

// const p4 = ref(null);
var isActive = ref(false)
const pointdisplay = ref(null);
var pointdisplayStyle = reactive({})

var srxStyleObject = reactive({
  color:"#3CD2DC",
  height: "300px",
  width: "300px",
  backgroundColor : "red"
})
// srxStyleObject.backgroundColor = "blue"
srxStyleObject = {
  color:"red",
  height: "300px",
  width: "300px",
  "background-color" : "pink"
}

var p1Style = reactive({})
var p2Style = reactive({})
var p3Style = reactive({})
var p4Style = reactive({})


const mysubmit = function(){

    var newp = mynum.value;  
    var oldp = oldpoint.value;
  
    if (newp != oldp) {
        if (newp > 200) {
          newp = 200;
          
          mynum.value = 200;
        } else if (newp < 0) {
          newp = 0;
          mynum.value = 0 ;
        }
        ticker(newp, oldp);
      }
}






const   ticker = function (newer, older) {
  var iterator = Math.abs(newer - older);
  var timing = 2500 / iterator;
  if (timing < 10) {
    timing = 10;
  } else if (timing > 100) {
    timing = 100;
  }

  var iv = setInterval(count, timing);

  function count() {
    if (older < newer) {
      older++;
    } else {
      older--;
    }
    
    // disp.html(older);
    oldpoint.value = older;

    circle(older);
    if (older == newer) {
      clearInterval(iv);
    }
  }
}

const circle =  function(points) {

  console.log("in circle points="+points);

  var sea = "#0A6E78";
  var blue = "#3CD2DC";
  var red = "#F00";
  var grey = "#444";
  var shade = "inset 0 0 0 5px ";
  var clr = blue;
  var max = 100;

  if (points >= max) { // >= 100
    shade += sea;
    clr = blue;
  } else if (points < max) { // < 100
    points += max;
    clr = sea;
    shade += grey;
  } else { // 0
    shade += grey;
    p1Style={
      "opacity": "0",
      "transform": "rotate(90deg) skew(0deg)"
    };
   
    p2Style.opacity =  "0",
    p2Style.transform ="rotate(180deg) skew(0deg)"
    
    p3Style.opacity= "0",
    p3Syel.transform= "rotate(270deg) skew(0deg)"
    
    p4Style ={
      "opacity": "0",
      "transform": "skew(0deg)"
    };
  }

  pointdisplayStyle = {
    "box-shadow": shade
  }

  if (points >= max && points <= (max * 5 / 4)) {
    var skew = 90 - (3.6 * (points - max));
    p1Style={
      "transform": "rotate(90deg) skew(" + skew + "deg)",
      "background-color": clr,
      "opacity": "1"
    };
    p2Style={
      "opacity": "0",
      "transform": "rotate(180deg) skew(0deg)"
    };
    p3Style={
      "opacity": "0",
      "transform": "rotate(270deg) skew(0deg)"
    };
    p4Style={
      "opacity": "0",
      "transform": "skew(0deg)"
    };
  } else if (points > (max * 5 / 4) && points <= (max * 3 / 2)) {
    var skew = 180 - (3.6 * (points - max));
    p1Style={
      "transform": "rotate(90deg)",
      "background-color": clr,
      "opacity": "1"
   };
    p2Style={
      "transform": "rotate(180deg) skew(" + skew + "deg)",
      "background-color": clr,
      "opacity": "1"
   };
    p3Style={
      "opacity": "0",
      "transform": "rotate(270deg) skew(0deg)"
   };
    p4Style={
      "opacity": "0",
      "transform": "skew(0deg)"
   };
  } else if (points > (max * 3 / 2) && points <= (max * 7 / 4)) {
    var skew = 270 - (3.6 * (points - max));
    p1Style={
      "transform": "rotate(90deg)",
      "background-color": clr,
      "opacity": "1"
   };
    p2Style={
      "transform": "rotate(180deg)",
      "background-color": clr,
      "opacity": "1"
   };
    p3Style={
      "transform": "rotate(270deg) skew(" + skew + "deg)",
      "background-color": clr,
      "opacity": "1"
   };
    p4Style={
      "opacity": "0",
      "transform": "skew(0deg)"
   };
  } else if (points > (max * 7 / 4) && points <= (max * 2)) {
    var skew = 360 - Math.round(3.6 * (points - max));
    p1Style={
      "transform": "rotate(90deg)",
      "background-color": clr,
      "opacity": "1"
    };
    p2Style={
      "transform": "rotate(180deg)",
      "background-color": clr,
      "opacity": "1"
    };
    p3Style={
      "transform": "rotate(270deg)",
      "background-color": clr,
      "opacity": "1",
      "box-shadow": "none"
    };
    p4Style={
      "transform": "skew(" + skew + "deg)",
      "background-color": clr,
      "opacity": "1"
    };
  }
}

mysubmit()  

</script>



<style>
@import url('https://fonts.googleapis.com/css?family=Fjalla+One');

body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  /* background: #222; */
  background: black;
  font-family: sans-serif;
}

#display {
  margin-top: 5%;
  overflow: overlay;
}

#pointdisplay {
  font-size: 100px;
  height: 300px;
  width: 300px;
  margin-left: -150px;
  left: 50%;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  /* background: greenyellow; */
}

#pointdisplay .pointer {
  width: 150px;
  height: 150px;
  position: absolute;
  transform-origin: 100% 100%;
}

#pointdisplay .cover {
  position: absolute;
  width: 290px;
  height: 290px;
  border-radius: 50%;
  top: 5px;
  left: 5px;
  background-color: #222;
}

#pointdisplay p {
  background: linear-gradient(to right, #0A6E78 20%, #3CD2DC 80%), #222;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 200px;
  text-align: center;
  font-family: 'Fjalla One';
  width: 200px;
  height: 200px;
  margin: 50px 0 0 50px;
  border-radius: 50%;
  position: relative;
}

#setNum{
  width: 305px;
  margin: 60px auto 20px auto;
  position: relative;
}

#numInput, #submitNum{
  width: 150px;
  height: 60px;
  margin: 0 5px;
  border-radius: 30px;
  border: none;
  background: transparent;
  box-sizing: border-box;
  border: 2px solid #0A6E78;
  outline: none;
  color: #0A6E78;
  font-size: 18px;
  margin: 0;
	padding: 0;
}

#numInput{
  padding: 0 20px;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

#submitNum:hover{
  cursor: pointer;
}

.instructions{
  text-align: center;
  color: #0A6E78;
  font-family: sans-serif;
}
footer{
  width: 100%;
  position: absolute;
  bottom: 5%;
  text-align: center;
  color: #444;
}
</style>